<form>
  <fieldset id="payment">
    {% if cards %}
      <legend>{{ text_credit_card }}</legend>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">{{ entry_card }}</label>
        <div class="col-sm-10">
          <div class="form-check form-check-inline">
            <label> <input type="radio" name="CreateToken" value="0" class="form-check-input" checked="checked"/>
              {{ entry_card_existing }} </label>
          </div>
          <div class="form-check form-check-inline">
            <label> <input type="radio" name="CreateToken" value="" class="form-check-input"/>
              {{ entry_card_new }} </label>
          </div>
        </div>
      </div>
      <div id="card-existing">
        <div class="form-group row required">
          <label class="col-sm-2 col-form-label" for="Token">{{ entry_cc_choice }}</label>
          <div class="col-sm-8">
            <select name="Token" class="form-control">
              {% for card in cards %}
                <option value="{{ card.token }}">{{ text_card_type }} {{ card.type }}, {{ text_card_digits }} {{ card.digit }}, {{ text_card_expiry }} {{ card.expiry }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-sm-2">
            <button type="button" id="button-delete" data-loading-text="{{ text_loading }}" class="btn btn-danger">{{ button_delete_card }}</button>
          </div>
        </div>
      </div>
      <div style="display:none" id="card-save" class="form-group">
        <label class="col-sm-2 col-form-label">{{ entry_card_save }}</label>
        <div class="col-sm-10">
          <div class="form-check">
            <label> <input type="checkbox" name="CreateToken" value="1" disabled/> </label>
          </div>
        </div>
      </div>
    {% elseif sagepay_server_card %}
      <legend>{{ text_credit_card }}</legend>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label">{{ entry_card }}</label>
        <div class="col-sm-10">
          <div class="form-check form-check-inline">
            <label> <input type="radio" name="CreateToken" value="" class="form-check-input" checked="checked"/>
              {{ entry_card_new }} </label>
          </div>
        </div>
      </div>
      <div id="card-save" class="form-group">
        <label class="col-sm-2 col-form-label">{{ entry_card_save }}</label>
        <div class="col-sm-10">
          <div class="form-check">
            <label> <input type="checkbox" name="CreateToken" value="1"/> </label>
          </div>
        </div>
      </div>
    {% endif %}
    <div class="d-inline-block pt-2 pd-2 w-100">
      <div class="float-right">
        <button type="button" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_confirm }}</button>
      </div>
    </div>
  </fieldset>
</form>
<script type="text/javascript">
$('input[name=\'CreateToken\']').on('change', function() {
	if (this.value === '0') {
		$('#card-existing').show();
		$('#card-save').hide();
		$('.form-control').prop('disabled', false);
		$('#card-save :input').prop('disabled', true);
	} else {
		$('#card-existing').hide();
		$('#card-save').show();
		$('.form-control').prop('disabled', true);
		$('#card-save :input').prop('disabled', false);
	}
});
//</script>
<script type="text/javascript"><!--
$('#button-confirm').bind('click', function() {
	$.ajax({
		url: 'index.php?route=extension/payment/sagepay_server/send',
		type: 'post',
		data: $('#card-existing :input:checked, #card-save :input:enabled, #payment select:enabled'),
		dataType: 'json',
		cache: false,
		beforeSend: function() {
			$('#button-confirm').button('loading');
		},
		complete: function() {
			$('#button-confirm').button('reset');
		},
		success: function(json) {
			// if success
			if (json['redirect']) {
				html = '<form action="' + json['redirect'] + '" method="post" id="redirect">';
				html += '  <input type="hidden" name="Status" value="' + json['Status'] + '" />';
				html += '  <input type="hidden" name="StatusDetail" value="' + json['StatusDetail'] + '" />';

				html += '</form>';

				$('#payment').after(html);

				$('#redirect').submit();
			}

			// if error
			if (json['error']) {
				$('#payment').before('<div id="sagepay_message_error" class="alert alert-warning"><i class="fas fa-info-circle"></i> ' + json['error'] + '</div>');
			}
		}
	});
});
//--></script>
<script type="text/javascript"><!--
$('#button-delete').bind('click', function() {
	if (confirm('{{ text_confirm_delete }}')) {
		$.ajax({
			url: 'index.php?route=extension/payment/sagepay_server/delete',
			type: 'post',
			data: $('#card-existing :input[name=\'Token\']'),
			dataType: 'json',
			beforeSend: function() {
				$('#button-delete').button('loading');
			},
			complete: function() {
				$('#button-delete').button('reset');
			},
			success: function(json) {
				if (json['error']) {
					alert(json['error']);
				}

				if (json['success']) {
					$.ajax({
						url: 'index.php?route=checkout/confirm',
						dataType: 'html',
						success: function(html) {
							$('#collapse-checkout-confirm .card-body').html(html);
						},
						error: function(xhr, ajaxOptions, thrownError) {
							alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
						}
					});
				}

			}
		});
	}
});
//--></script>
